<template>
	<view class="container">
		<view class="header">
			<view class="header-return" @click="returnclick()"></view>
			<view class="header-title">{{$store.state.user.personal.nickName}}</view>
		</view>
		<view class="body">
			<view class="body-ask" >
				<view class="body-ask-title">
					发起提问
				</view>
				<view class="body-ask-hint">
					<view class="body-ask-asterisk"></view>
					请选择学龄段：
				</view>
				<view class="body-ask-period">
					<view class="body-ask-period-piece" 
						v-for="item,index in periodlist"
						:key="index"
						:class="{select:period==item.value}" 
						@click="periodclick(item.value,index)"
					>{{item.text}}</view>
				</view>
				<view class="body-ask-hint" v-if="isshowsubject">
					<view class="body-ask-asterisk"></view>
					请选择年级：
				</view>
				<view class="body-ask-period" v-if="isshowsubject">
					<view class="body-ask-period-piece" 
						v-for="item,index in gradelist"
						:key="index"
						:class="{select:gradeId==item.value}"
						@click="gradeclick(item.value)"
					>{{item.text}}</view>
				</view>
				<view class="body-ask-hint" v-if="isshowsubject">
					<view class="body-ask-asterisk"></view>
					请选择学科：
				</view>
				<view class="" v-else></view>
				<view class="body-ask-subject"  v-if="isshowsubject">
					<view 
						class="body-ask-subject-piece" 
						v-for="item,index in subjectlist"
						:key="index"
						:class="{select:subject==item.value}"
						@click="subjectclick(item.value,index)"
					>{{item.text}}</view>				
				</view>
				<view class="" v-else></view>
				<view class="body-ask-describe">
					<view class="body-ask-asterisk"></view>
					<el-input
					  type="textarea"
					  :autosize="{ minRows: 2, maxRows: 5}"
					  placeholder="请在此处描述您的问题"
					  v-model="describe"
					  maxlength="500"
					  show-word-limit>
					</el-input>
					<!-- <uni-easyinput type="textarea" maxlength='500' autoHeight v-model="describe" placeholder="请在此处描述您的问题"></uni-easyinput> -->
				</view>
				<view class="body-ask-picture">
					<view class="body-ask-picture-main">
						<view class="body-ask-picture-top">
							<view class="body-ask-picture-title">添加图片</view>
							<view class="body-ask-picture-total">({{total}}/6)</view>
						</view>
						<uni-file-picker
							style="margin: 0 0 0 4vw;"
							v-model="imageValue"  
							fileMediatype="image" 
							@select="select"
							@delete="deleteit" 
							limit="6"
							v-if="pictureshow"
							file-extname="png,jpg"
						/>
					</view>
				</view>
			</view>
		</view>
		<view class="body-button" @click="result()">
			开始提问
		</view>
		<!-- 弹出 -->
		<uni-popup ref="popup" type="center">
			<view class="popup">
				<view class="popup-close" @click="closepopup()"></view>
				<view class="popup-title">{{popup.title}}</view>
				<view class="popup-text">{{popup.text}}</view>
				<view class="popup-button" @click="closepopup()">{{popup.button}}</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { getCommonUploads, getCommonUpload, getQuestionsAskQuestion, uploadAvatar, getOnlineSubjectAndPeriod} from "@/api/index";
	import { getOrganizationId, setOrganizationId, removeOrganizationId } from '@/utils/auth2' 
	import { pathToBase64, base64ToPath } from 'image-tools'
	import { getinfo, setinfo, removeinfo } from '@/utils/auth5'
	import { getsubject, setsubject, removesubject } from '@/utils/auth6'
	import { getperiod, setperiod, removeperiod } from '@/utils/auth7'
	import { getgrade, setgrade, removegrade } from '@/utils/auth8'
	import { getStudio, setStudio, removeStudio } from '@/utils/auth9' 
	export default {
		data() {
			return {
				period: -1,
				subject: -1,
				gradeId: getinfo().gradeId,
				describe: '',
				popup:{
					title:'提问失败',
					text:'提问失败',
					button:'确定',
				},
				periodlist: [],
				subjectlist: [],
				periods: [],
				subjects: [],
				subjects2: [],
				filePathsList: [],
				picturelist: [],
				imgUrl: [],
				imageValue: [],
				total: 0,
				pictureshow: true,
				loading: false,
				isshowsubject: false,
				gradelist: getgrade()	
			}
		},
		computed: {
		   refresh() {
		      return this.$store.state.user.refresh
		   }
		},
		watch: {
			refresh: {
				immediate: true,
				handler: function(newval) {
					this.Initialize()
				}
			}
		},
		onshow() {
		//    this.Initialize()
		},
		methods: {
			Initialize(){
				this.total=0
				this.isshowsubject=false
				this.pictureshow=false
				this.$nextTick(()=>{
					this.pictureshow=true
				})
				this.picturelist = []
				this.OnlineSubjectAndPeriod()
			},
			OnlineSubjectAndPeriod(){	
				if (getStudio()) {
					getOnlineSubjectAndPeriod(getStudio()).then(res => {
						let data = res
						let data2 = []	
						for(let i in data){
							data2.push(data[i].periodId)
						}
						data2 = Array.from(new Set(data2))
						// console.log("data2",data2)
						
						this.periodlist=[]
						this.subjectlist=[]
						let flag = -1
						let plist = getperiod()
						let sub = getsubject()
						for(let i in plist){
							for(let j in data2){
								if(plist[i].value==data2[j]){
									this.periodlist.push(plist[i])
									continue
								}
							}
						}
						for(let i in this.periodlist){
							this.subjects2[i]=[]
							for(let j in data){
								if(this.periodlist[i].value==data[j].periodId){
									for(let k in sub){
										if(sub[k].value==data[j].subjectId){
											this.subjects2[i].push(sub[k])
										}
									}
								}
							}
						}
						console.log("this.periodlist",this.periodlist)
						// gradelist
					})
				}
			},
			select(e){
				for(let i in e.tempFilePaths){
					this.total++
					let data = e.tempFilePaths[i]
					pathToBase64(data).then(path => {
						this.picturelist.push({uuid: e.tempFiles[0].uuid, name: 'avatarfile', filePath: path})
					})
				}
				
			},
			deleteit(e){
				this.total--
				let list = []
				for(let i in this.picturelist){
					if(this.picturelist[i].uuid!=e.tempFile.uuid){
						list.push(this.picturelist[i])
					}
				}
				this.picturelist = list
			},
			picchange(e){
				
			},
			periodclick(id,i){
				this.isshowsubject=true
				this.period=id
				this.subject=-1
				this.subjectlist=this.subjects2[i]

				this.gradelist = this.periodlist[i].baseGrade
				
				this.gradeId = this.gradelist[0].value
			},
			subjectclick(id,i){
				this.subject=id
			},
			gradeclick(id){
				this.gradeId=id
			},
			async pictureclick(){
				uni.showToast({title: '提交中,请等待...'})
				this.imgUrl = []
				for(let i in this.picturelist){
					// let data = {name: 'avatarfile', filePath: this.picturelist[i].filePath}
					let data = {name: 'files', filePath: this.picturelist[i].filePath}
					// await uploadAvatar(data).then(res => {
					await getCommonUploads(data).then(res => {
						this.imgUrl.push(res.fileNames)
					})
				}
				let questionPicture = '' 
				for(let i in this.imgUrl){
					if(i==0){
						questionPicture=this.imgUrl[0]
					}else{
						questionPicture+=';'+this.imgUrl[i]
					}
				}
				let data = {
					"question": this.describe,
					"questionPicture": questionPicture,
					"periodId": this.period,
					"subjectId": this.subject,
					"gradeId": this.gradeId,
					organizationId: getStudio()?.organizationId || ''
				}
				this.$store.state.user.recommend.question=this.describe
				this.$store.state.user.recommend.periodId=this.period
				this.$store.state.user.recommend.subjectId=this.subject
				this.$store.state.user.recommend.gradeId=this.gradeId
				await getQuestionsAskQuestion(data).then(res => {
					this.loading = false
					if(res.msg=="操作成功"){
						this.period = -1
						this.subject = -1
						this.describe = ''
						this.$store.state.user.refresh=!this.$store.state.user.refresh
						this.$router.push('/pages/aqc/result')
					}
				});

				uni.hideToast()
			},
			handleSelect(e){
			},
			handleDelete(e){
			},
			returnclick(){
				this.$router.push(this.$store.state.user.url)
			},
			result(){
				if(this.loading){
					return
				}else{
					this.loading = true
					this.commonuploads()
				}
			},
			commonuploads(){
				// console.log("this.describe",this.describe)
				// console.log("this.period",this.period)
				console.log("this.subject",this.subject)
				if(this.period < 0){
					this.popup.text = '未选择学龄段'
				}else if(this.subject < 0){
					this.popup.text = '未选择学科'
				}else if(!this.describe){
					this.popup.text = '未填写问题描述'
				}
				
				if(this.describe&&this.period>=0&&this.subject>=0){
					this.pictureclick()
				}else{
					this.$refs.popup.open('center')
					this.loading = false
				}	
			},
			open(){
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('center')
			},
			closepopup(){
				this.$refs.popup.close()
			}
		},
	}
</script>

<style>
	.container {
		font-size: 4vw;
		width: 100vw;
		height: 100vh;
		display: grid;
		justify-items: center;
		align-items: center;
		/* grid-template-columns: 1fr; */
		grid-template-rows: 12.5vw auto 12.5vw;
	}
	.header{
		width: 100%;
		height: 12.5vw;
		background: #ffffff;
		border: 1px solid #F6F7F8;
		display: grid;
		justify-items: center;
		align-items: center;
		/* grid-template-columns: 1fr; */
		/* grid-template-rows: 1fr 1fr; */
	}
	.header-title{
		font-size: 5vw;
	}
	.header-return{
		position: absolute;
		width: 5vw;
		height: 5vw;
		left: 5vw;
		top: 3.5vw;
		background: url(../../static/index/return.svg);
		background-size: 100% 100%;
		cursor: pointer;
	}
	.body{
		margin: 0 0 0 0;
		width: 100%;
		height: 100%;
		display: grid;
		justify-items: center;
		align-items: start;
		/* grid-template-columns: 1fr; */
		/* grid-template-rows: 148vw 24vw; */
	}
	.body-ask{
		margin: 2vw 0 1vw 0;
		padding: 2vw;
		width: 95vw;
		border-radius: 2vw;
		height: auto;
		display: grid;
		justify-items: start;
		align-items: center;
		/* grid-template-columns: 1fr; */
		grid-template-rows: auto auto auto auto auto auto auto 1fr;
		background: #ffffff;
	}
	.body-ask-title{
		height: 10vw;
		padding: 0 0 0 3vw;
		font-size: 4.5vw;
		font-weight: 600;
	}
	.body-ask-hint{
		height: 10vw;
		display: flex;
		color: #515257;
		line-height: 10vw;
	}
	.body-ask-asterisk{
		margin: 4vw 1vw 0 0;
		width: 2vw;
		height: 2vw;
		background: url(../../static/aqc/asterisk.svg);
		background-size: 100% 100%;
	}
	/deep/ .uni-textarea-compute{
		height: 30vw;
	}
	.body-ask-period{
		margin: 2vw 0 2vw 0;
		width: 100%;
		/* height: 10vw; */
		display: grid;
		justify-items: center;
		align-items: center;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
		/* grid-template-rows: 1fr; */
	}
	.body-ask-period-piece{
		margin: 0 1vw 2vw 1vw;
		width: 16vw;
		height: 5.6vw;
		border-radius: 0.5vw;
		display: grid;
		justify-items: center;
		align-items: center;
		font-size: 3.5vw;
		color: #515257;
		background: #F6F7F7;
		cursor: pointer;
	}
	.select{
		color: #ffffff;
		background: #1492FF;
	}
	.body-ask-hint{
		
	}
	.body-ask-subject{
		margin: 2vw 0 2vw 0;
		width: 100%;
		/* min-height: 10vw; */
		display: grid;
		justify-items: center;
		align-items: center;
		grid-row-gap: 2vw;
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
	.body-ask-subject-piece{
		margin: 0 1vw 0 1vw;
		width: 20vw;
		height: 5.6vw;
		border-radius: 0.5vw;
		display: grid;
		justify-items: center;
		align-items: center;
		font-size: 3.5vw;
		color: #515257;
		background: #F6F7F7;
		cursor: pointer;
	}
	.select{
		color: #ffffff;
		background: #1492FF;
	}
	.body-ask-describe{
	    margin: 5vw 0 2vw 0;
		width: 100%;
		height: auto;
		display: flex;
	}
	/deep/ .uni-textarea-placeholder{
		font-size: 4vw;
	}
	/deep/ .uni-textarea-textarea{
		line-height: 5vw;
		font-size: 4vw;
	}
	.body-ask-picture{
		width: 100%;
		height: 100%;
		/* display: grid; */
		/* justify-items: center; */
		/* align-items: center; */
		/* grid-template-rows: 10vw 1fr; */
	}
	.body-ask-picture-text{
		margin: 0 0 0 2vw;
		width: 100%;
		display: grid;
		/* justify-items: center; */
		align-items: center;
		grid-template-columns: 30vw auto 1fr;
	}
	.body-ask-picture-main{
		width: 90vw;
		height: auto;
		/* display: grid;
		grid-template-columns: 30vw 30vw 30vw; */
	}
	.body-ask-picture-top{
		margin: 0 0 0 3vw;
		height: 10vw;
		display: grid;
		/* justify-items: center; */
		align-items: center;
		grid-template-columns: 18vw auto;
	}
	.body-ask-picture-total{
		font-size: 4vw;
		color: #B3B5B9;
	}
	/deep/ .uni-file-picker__header{
		width: 27vw;
	}
	/deep/ .file-title{
		font-size: 4vw;
	}
	/deep/ .file-count{
		font-size: 4vw;
		height: 6vw;
		display: grid;
		justify-items: center;
		align-items: center;
	}
	/deep/ .uni-file-picker__container{
		width: 90vw;
		/* height: 20vw; */
	}
	.body-button{
		width: 95vw;
		height: 10vw;
		border-radius: 5vw;
		display: grid;
		justify-items: center;
		align-items: center;
		/* font-size: 4vw; */
		color: #ffffff;
		background: #1492FF;
		cursor: pointer;
	}
	
	.popup{
		width: 60vw;
		height: 40vw;
		background: #ffffff;
		position: absolute;
		margin-left: -30vw;
		margin-top: -20vw;
		border-radius: 2.2vw;
		
		display: grid;
		justify-content: center;
		align-items: center;
		grid-template-rows: 5vw 5vw 15vw 15vw;
	}
	.popup-close{
		margin: 2vw 0 0 55vw;
		width: 3vw;
		height: 3vw;
		background: url(../../static/index/close.svg);
		background-size: 100% 100%;
		cursor: pointer;
	}
	.popup-title{
		display: grid;
		justify-content: center;
		align-items: center;
		font-weight: 600;
		font-size: 4vw;
	}
	.popup-text{
		margin: 0 5vw 0 05vw;
		width: 50vw;
		display: grid;
		justify-content: center;
		align-items: center;
		font-size: 3.4vw;
	}
	.popup-button{
		margin: 0 5vw 0 5vw;
		width: 50vw;
		height: 8vw;
		border-radius: 4vw;
		display: grid;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		background: #1492FF;
		cursor: pointer;
	}
	
	.vue-cropper{
		margin: 2vw;
		width: 26vw;
		height: 26vw;
	}
	.uploadbutton{
		float: left;
		margin: 2vw;
		width: 26vw;
		height: 26vw;
		border-width: 1px;
		border-style: solid;
		border-color: rgb(238, 238, 238);
		border-radius: 3px;
	}
	.cross{
		position: relative;
		top: calc(50% - 0.15vw);
		left: calc(50% - 5vw);
		width: 10vw;
		height: 0.3vw;
		background: rgb(238, 238, 238);
		/* background: #000000; */
	}
	.vertical{
		position: relative;
		top: calc(50% - 5vw);
		left: calc(50% - 0.15vw);
		width: 0.3vw;
		height: 10vw;
		/* background: #000000; */
		background: rgb(238, 238, 238);
	}
	::-webkit-scrollbar {
	    
	}
</style>